<!-- 血压心率变化情况 -->
<template>
  <div class="heart_pressure">
    <div style="text-align: center;">
      <span style="font-weight: bold;font-size: 18px;">心率变化情况</span>
    </div>
    <el-row class="ml10 flex-auto">
      <el-form :inline="true">
        <el-form-item label="选择心率查询月份">
          <el-select v-model="monthAgo" placeholder="请选择">
            <el-option label="本月" :value="0" />
            <el-option label="上个月" :value="1" />
            <el-option label="前2个月" :value="2" />
            <el-option label="前3个月" :value="3" />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="getMonthlyData" icon="search" type="primary">查询</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <div class="echarts_container">
      <div class="echarts_main" ref="heart_pressure_chart"></div>
    </div>
  </div>

</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts';
import { getMonthLyHeartRateData } from '../../../api/patient/patientPersureHeartRate';

const props = defineProps<{
  patientUid: string
}>()

// 计算数组平均值，如果有null值则不计入平均，如果数组为空则返回null
const calcAverage = (arr: number[]) => {
  if (arr.length === 0)
  {
    return null;
  }
  // 先做过滤，去掉null值
  const filterArr = arr.filter(item => item !== null);
  if (filterArr.length === 0)
  {
    return null;
  }
  // 最终保留两位小数
  return parseFloat((filterArr.reduce((prev, curr) => prev + curr) / filterArr.length).toFixed(2));
}

// 调取前几个月的数据
const monthAgo = ref(0);

const heart_pressure_chart = ref(null);

const heartRateList = ref([60, 80, null, 100, 60, 80])

const heart_pressure_date = ref({
  categories: ['2024-05-03', '2024-05-06', '2024-05-09', '2024-05-12', '2024-05-14', '2024-05-16'],
});

// 获取血压心率数据
const getMonthlyData = async () => {
  const data = {
    patientUid: props.patientUid,
    monthsAgo: monthAgo.value,
  }
  // 获取血压数据
  const res = await getMonthLyHeartRateData(data);
  console.log('调用接口成功', res);
  const detailData = res.data;
  // 清空列表
  heartRateList.value = [];
  heart_pressure_date.value.categories = [];
  // 遍历列表
  detailData.forEach((item: any) => {
    // 高压低压心率都需要计算平均值，如果有null值则不计入平均
    heartRateList.value.push(calcAverage(item['heart rate']));
    heart_pressure_date.value.categories.push(item.date);
  });
  echartInit();
}

const echartInit = () => {
  if (heart_pressure_chart.value)
  {
    const myChart = echarts.init(heart_pressure_chart.value);
    window.addEventListener('resize', function () {
      myChart.resize();
    })

    const option = {
      grid: {
        x: 60,//左
        y: 60,//上
        x2: 30,//右
        y2: 70,//下
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['心率'],
        top: 5,
        right: 0
      },
      xAxis: {
        type: 'category',
        data: heart_pressure_date.value.categories,
        axisLabel: { interval: 0 },
      },
      yAxis: [
        {
          type: 'value',
          name: '心率(次/分)',
          min: 30,
          max: 230
        }
      ],
      dataZoom: [
        {
          show: true,
          height: 14,
          start: 0,
          end: 50,
          width: '80%',
          // 设置滚动条显示位置
          left: "center",
        }
      ],
      series: [
        {
          name: '心率',
          type: 'line',
          datasetIndex: 2,
          data: heartRateList.value,
          connectNulls: true,
        }
      ]
    };

    myChart.setOption(option);
  }
}

onMounted(async () => {
  await getMonthlyData();
});
</script>

<style scoped>
.echarts_container {
  width: 100%;
  height: 350px;
  margin-top: 20px;
  border: 1px solid #e5e5e5;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
}

.echarts_main {
  width: 95%;
  height: 100%;
}
</style>